<template>
  <div class="login-page">
    <el-card class="el-card">
      <el-form ref="fff" :model="form" :rules="rules">
        <img src="@/assets/head.png" class="logo" alt="" />
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="el-icon-mobile-phone"
            v-model="form.loginName"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-unlock"
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            prefix-icon="el-icon-circle-check"
            placeholder="请输入验证码"
            v-model="form.code"
          >
          </el-input>
          <div>
            <img @click="yan" :src="yanzhengma" alt="" class="yanzheng" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="deng" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {Message} from 'element-ui' 
export default {
  data() {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        clientToken: '',
        code: '',
        loginType: 0,
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change'],
          },
          {
            min: 5,
            max: 11,
            message: '用户名为5-11位',
            trigger: ['blur', 'change'],
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change'],
          },
          {
            pattern: /^\w{5,11}$/,
            message: '长度为5-11位',
            trigger: ['blur', 'change'],
          },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ['blur'] },
          // {pattern:/^/}
        ],
      },
    }
  },
  computed: {
    random: {
      get() {
        return this.form.clientToken || Math.floor(Math.random() * 1000)
      },
      set(val) {
        this.form.clientToken = val
      },
    },
    yanzhengma() {
      return `http://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/${this.random}`
    },
  },
  methods: {
    async login() {
      try {
        const valid = await this.$refs.fff.validate()
        if (valid) {
          //  const res=await Login(this.form)
          await this.$store.dispatch('user/loginAction', this.form)
         Message('登录成功')
           this.$router.push('/index')
          // console.log(res);
        }
      } catch (e) {
        console.log(e)
      }
    },
    yan() {
      this.random = Math.floor(Math.random() * 1000)
    // this.form.clientToken = clientToken()

    },
  },
  created() {
    // js创建含数字字母的随机字符串
    const clientToken = (len = 32) => {
      let text = ''
      let possible =
        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i < len; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length))
      return text
    }
    this.form.clientToken = clientToken()
    // console.log(this.form.clientToken);
  },
}
</script>

<style>
.login-page {
  min-height: 100vh;
  background: url(@/assets/login-bg.png) no-repeat center / cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-card {
  position: absolute;
  width: 440px;
  height: 300px;
  /* top: 50%;
  left: 50%;
  margin-top: -194px;
  margin-left: -259px; */
  padding: 76px 35px 0;
  background: #fff;
  overflow: initial !important;
}
.yanzheng {
  position: relative;
  width: 130px;
  height: 40px;
  bottom: 40px;
  left: 270px;
}
.logo {
  position: absolute;
  width: 96px;
  height: 96px;
  top: -46px;
  left: 50%;
  margin-left: -48px;
}
.deng {
  position: relative;
  width: 400px;
  height: 40px;
  bottom: 50px !important;
}
</style>
